<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/joint.min.css" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lodash.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/backbone.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/joint.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.left {
				float: left;
				height: 100%;
				width: 20%;
			}
			
			html,
			body,
			#paper {
				height: 100%;
				width: 100%;
			}
			
			#paper {
				position: absolute;
				top: 0;
			}
			
			p {
				margin: 50px 0;
			}
		</style>
	</head>

	<body>
		<div style="position: fixed;top: 0;z-index: 100000;font-weight: bold;" >原创作者来源<a href="https://blog.csdn.net/weixin_41916005" style="font-weight: 400;">https://blog.csdn.net/weixin_41916005</a></div>
		<div id="paper">

		</div>
		<div class="box"></div>

		<script type="text/javascript">
			var graph = new joint.dia.Graph;

			var paper = new joint.dia.Paper({
				el: $('#paper'),
				width: 100 + '%',
				height: 100 + '%',
				gridSize: 1,
				model: graph
			});

			function shape(x, y, label, a, b) {

				var cell = new joint.shapes.basic.Rect({
					position: {
						x: x,
						y: y
					},
					size: {
						width: 100,
						height: 50
					},
					attrs: {
						rect: {
							fill: '#000',
							rx: 5,
							ry: 5,
							'stroke-width': 0
						},
						text: {
							text: label,
							'ref-x': .5,
							'ref-y': .5,
							fill: '#fff'
						},
					}
				});

				graph.addCell(cell);
				$(a).click(function() {
					window.open(b);
				});
				cell.toBack();
				return cell;
			};

			function link(source, target, label, vertices) {

				var cell = new joint.shapes.fsa.Arrow({
					source: {
						id: source.id
					},
					target: {
						id: target.id
					},
					labels: [{
						position: 0.5,
						attrs: {
							text: {
								text: label || '',
								'font-weight': 'bold'
							}
						}
					}],
					vertices: vertices || [],
					attrs: ({
						'.connection': {
							stroke: '#333333', //连线颜色
							'stroke-width': 4 //连线粗细
						},
						'.marker-target': {
							fill: 'red',
							d: 'M 10 0 L 0 5 L 10 10 z'
						}
					})
				});
				graph.addCell(cell);

				cell.toBack()

				return cell;
			}

			var data = [
				[{
					title: '订单',
					tolink: "",
					state: "0",
					id: "1",
					name: '订单',
					pox:500,
					poy:400
				}],
				[{
					title: '预售',
					tolink: "1",
					state: "1",
					id: "2",
					name: '预售',
					pox:100,
					poy:300
				}, {
					title: '预售2',
					tolink: "1",
					state: "0",
					id: "3",
					name: '预售2',
					pox:400,
					poy:600
				}],
				[{
					title: '采购清单',
					tolink: "2",
					state: "1",
					id: "4",
					name: '采购清单',
					pox:300,
					poy:800
				}]
			]

			console.log(data)
			var arraylist = [];
			$.each(data, function(index, item1) {
				$(".box").append("<div class='left'></div>")
				$.each(item1, function(index2, item2) {
					$(".left").eq(index).append("<p id='" + item1[index2].id + "'>" + item1[index2].title + "</p>")
					debugger
					var id1 = item1[index2].id
					var arrValue1 = arraylist[id1];
					var y = item1[index2].poy;
					var x = item1[index2].pox;
					var name = item1[index2].name
					if(arrValue1 == undefined) {
						arraylist[id1] = shape(x, y, name);
					}
					if(item1[index2].tolink != "") {
						var id2 = item1[index2].tolink
						var arrValue2 = arraylist[id2];
						var y2 = $("#" + id2).offset().top;
						var x2 = $("#" + id2).offset().left;
						var state = item1[index2].state
						if(arrValue2 == undefined) {
							arraylist[id2] = shape(x2, y2);
						}
						link(arraylist[id2], arraylist[id1], state);
					}

				});

			});
			
		</script>

	</body>

</html>